<style scoped lang="less"></style>
<template>
	<div>
		<Row>
			<Col span="24">
				<Card style="margin-bottom: 10px">
					<Form inline>
						<FormItem style="margin-bottom: 0">
							<Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
								<Option :value="1">活动标题</Option>
							</Select>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<label>
								<Input v-model="searchConf.keywords" placeholder=""></Input>
							</label>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
						</FormItem>
					</Form>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span="24">
				<Card>
					<!--        <QAuth :access="'admin/User/add'">-->
					
					<!--        </QAuth>-->
					
					<div>
						<Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
					</div>
					<div class="margin-top-15" style="text-align: center">
						<Page :total="tableShow.listCount" :current="tableShow.currentPage"
						      :page-size="tableShow.pageSize" @on-change="changePage"
						      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
					</div>
				</Card>
			</Col>
		</Row>
	</div>
</template>
<script>
  import {getList, del} from '@/api/active'
  import {getActiveTypeName, getActiveStatusName} from '@/libs/util'
  import {forEach} from "../../libs/tools";

  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          del(currentRow.id).then(response => {
            vm.tableData.splice(index, 1)
            vm.$Message.success(response.data.msg)
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size:'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, vm.$t('delete_button'))
    ])
  };
  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'primary',
        size:'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/actives/active-info/' + currentRow.id + '/0');
        }
      }
    }, vm.$t('edit_button'))
  };
  const viewButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'default',
        size:'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/actives/active-info/' + currentRow.id + '/1');
        }
      }
    }, vm.$t('view_button'))
  };
  const ordersButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'info',
        size:'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/orders/orders-list/' + currentRow.id );
        }
      }
    }, '订单')
  };
  const commentsButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'default',
	      size:'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push({name:'comment_list',params:{goods_id:currentRow.id}});
        }
      }
    }, '评价')
  };
  const statisticsButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'info',
        size:'small'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push({name:'active-statistics',params: {active_id:currentRow.id}} );
        }
      }
    }, '统计')
  };
  export default {
    name: 'active_list',
    data() {
      return {
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '活动名',
            align: 'center',
            key: 'title',
            width: 120
          },
          {
            title: '库存',
            align: 'center',
            render: (h, params) => {
              return h('span', this.getSkuNum(params.row.sku,this))
            },
            width: 80
          },
          {
            title: '开始时间',
            align: 'center',
            key: 'start_time',
            width: 170
          },
          {
            title: '结束时间',
            align: 'center',
            key: 'end_time',
            width: 170
          },
          {
            title: '类型',
            align: 'center',
            render: (h, params) => {
              return h('span', getActiveTypeName(params.row.type, this))
            },
            width: 80
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              return h('span', getActiveStatusName(params.row.status, this))
            },
            width: 100
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                ordersButton(this, h, params.row, params.index),
                viewButton(this, h, params.row, params.index),
                editButton(this, h, params.row, params.index),
                deleteButton(this, h, params.row, params.index),
                commentsButton(this, h, params.row, params.index),
                statisticsButton(this, h, params.row, params.index),
              ])
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          type: '',
          keywords: ''
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getSkuNum(skus) {
        let sku = 0;
        skus.forEach(v => {
          sku += v.stock;
        });
        return sku;
      },
      changePage(page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1
        this.getList()
      },
      getList() {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          keywords: vm.searchConf.keywords
        }
        getList(params).then(response => {
          vm.tableData = response.data.data.list
          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
